<template>
   <div class="top_header">
  <span v-for="(item,index) in topType" @click="" >{{item.text}}</span>
</div>
<div class="card_content">
<div v-for="(item,index) in songlist" class="top_item">
<img :src="item.coverImgUrl" alt="" class="list_img" @click="playList(item)">
  <span>{{item.name}}</span>
</div>
</div>

</template>

<script lang="ts" setup>
import { useStore } from '@/store';
import { useRouter } from 'vue-router';
import { computed ,watchEffect,ref} from 'vue'

const router= useRouter()
const topType = [
  {
    text: '超级榜',
    value: '0'
  },
    {
    text: '云听榜',
    value: '7'
  },
    {
    text: '全球榜',
    value: '96'
  },
    {
    text: '花样榜',
    value: '8'
  },
]





const store = useStore()

 store.dispatch('music/getTopList')


//  await store.dispatch('songListInfo/getSongListInfo',)

const songlist = ref()


watchEffect(()=>{
 songlist.value= store.state.music.topList

})
const updateTop = async()=>{


}

const playList =  async({id}: any)=>{
 await store.dispatch('songListInfo/getSongListInfo', id)
  router.push('/songInfo')

}
</script>
<style lang="less" scoped>
.card_content{
  margin-top: -210px;
  margin-left: 500px;
  width: 1000px;
  height: 500px;
  position: absolute;
  .top_item{
    display: inline-block;
    margin: 20px 20px;
width: 200px;

height: 180px;
background-color: brown;
  }
}
.top_header{
  margin: -250px  550px;
 position: absolute;
  width: 520px;
  height: 50px;
  span{
    font-weight: 600;
    padding: 12px;
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
    cursor: pointer;
  }
}
.list_img{
border-radius: 10%;
  width: 200px;
  height: 190px;
  &:hover{
    transform: scale(1.1);
  }
}
</style>
